<template>
	<view class="order_status-card">
		<view class="u-flex u-flex-between u-flex-items-center">
			<view class="f-w-b f-s-16" v-if="orderInfo.status=='None'">待支付</view>
			<view class="f-w-b f-s-16" v-if="orderInfo.status=='Paid'">已支付</view>
			<view class="f-w-b f-s-16" v-else>取消支付</view>
			<!-- <view>
				<u-button color="#000000" shape="circle" plain text="取消订单" @click="goToAdd"
					:customStyle="{ width: '90px',height:'30px'}"></u-button>
			</view> -->
		</view>
		<view class="info-text u-m-t-24">
			订单号：{{orderInfo.orderNo}}
		</view>
		<view class="info-text u-m-t-20">
			订单时间：{{orderInfo.createAt}}
		</view>
		<view class="tips-text u-flex u-flex-items-center u-m-t-20">
			订单将于<up-count-down :time="900000" format="mm:ss" @finish="updateStatus"></up-count-down>后自动取消
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		orderInfo:{
			type: Object,
			default: () => ({})
		}
	})
	//倒计时结束
	const updateStatus = (e) => {
		
	}

</script>

<style lang="scss" scoped>
	.order_status-card {
		background-color: #fff;
		padding: 18px;
		margin-bottom: 10px;

		.info-text {
			font-size: 12px;
			color: #8C8C8C;
			line-height: 18px;
			letter-spacing: 1px;
		}

		.tips-text {
			font-size: 12px;
			color: #000;
			line-height: 18px;
			letter-spacing: 1px;
		}

	}
</style>